<template>
  <div class="page">
    <FCPage>
      <FCTab
        :activeKey="activeKey"
        :tabList="[
          { key: '1', title: '柜面领款处理' },
          { key: '2', title: '主动支付处理' },
        ]"
        :onChange="changeTab"
      >
        <div :slot="'1'">
          <FCPage direction="column">
            <FCLayout class="backgroundColor marginBottom">
              <FCForm
                ref="form"
                v-bind="queryForm"
                :dataset="ds1"
                :collapseForm="collapseForm"
                :controls="formControls"
              ></FCForm>
            </FCLayout>
            <FCPage direction="column" class="backgroundColor marginBottom">
              <FCLayout>
                <FCTable
                  shouldSelect
                  :scroll="{ x: '100%' }"
                  :fields="queryFields"
                  :dataset="ds2"
                  shouldPagination
                  :selectedRowKeys="selectedRowKeys"
                  :onSelectChange="onSelectChange"
                  :loading="loadingTable"
                ></FCTable>
              </FCLayout>
              <FCLayout
                v-if="ds2.getValues().length || false"
                height="36px"
                justifyContent="start"
                class="totalInfo"
              >
                <FCPage direction="row">
                  <a-space
                    >笔数：
                    <div class="numUnderline">
                      {{ selectedRowKeys.length || 0 }}
                    </div>
                    金额（记账）:
                    <div class="numUnderline">{{ payCount }}</div>
                  </a-space>
                </FCPage>
              </FCLayout>
            </FCPage>
          </FCPage>
        </div>
        <div :slot="'2'">
          <FCPage direction="column">
            <FCLayout class="backgroundColor marginBottom">
              <FCForm
                ref="form1"
                v-bind="queryForm"
                :dataset="ds11"
                :collapseForm="collapseForm1"
                :controls="formControls1"
              ></FCForm>
            </FCLayout>
            <FCPage direction="column" class="backgroundColor marginBottom">
              <FCLayout>
                <FCTable
                  shouldSelect
                  :scroll="{ x: '100%' }"
                  :fields="queryFields"
                  :dataset="ds22"
                  shouldPagination
                  :rowKey="'claimno'"
                  :selectedRowKeys="selectedRowKeys1"
                  :onSelectChange="onSelectChange1"
                  :loading="loadingTable1"
                ></FCTable>
              </FCLayout>
              <FCLayout
                v-if="ds22.getValues().length || false"
                height="36px"
                justifyContent="start"
                class="totalInfo"
              >
                <FCPage direction="row">
                  <a-space
                    >笔数：
                    <div class="numUnderline">
                      {{ selectedRowKeys1.length || 0 }}
                    </div>
                    金额（记账）:
                    <div class="numUnderline">{{ payCount1 }}</div>
                  </a-space>
                </FCPage>
              </FCLayout>
            </FCPage>
          </FCPage>
        </div>
      </FCTab>
    </FCPage>
    <FCPage direction="row">
      <FCLayout :flex="1" class="backgroundColor marginRight">
        <FCPage direction="column" style="height: 350px">
          <FCLayout class="marginBottom">
            <FCPage direction="row">
              <FCLayout>
                <FCSelect
                  :value="value"
                  :fcstyle="{ width: '150px' }"
                  :options="options"
                  :onChange="
                    (newValue) => {
                      this.value = newValue
                    }
                  "
                ></FCSelect>
              </FCLayout>
              <FCLayout>
                <a-space>
                  <FCButton type="primary" :onClick="confirm">确定</FCButton>
                  <FCButton type="primary" :onClick="detailReset"
                    >明细重置</FCButton
                  >
                  <FCButton :onClick="cancel">取消</FCButton>
                  <FCButton
                    type="primary"
                    :onClick="submit"
                    :loading="loadingSubmit"
                    >提交</FCButton
                  >
                </a-space>
              </FCLayout>
            </FCPage>
          </FCLayout>
          <FCLayout>
            <FCTable
              :scroll="
                submitRows.length > 0 ? { x: '100%', y: 200 } : { x: '100%' }
              "
              :fields="submitFields"
              :dataset="ds3"
            >
              <template slot="footer"> 合计：{{ total }} </template>
            </FCTable>
          </FCLayout>
        </FCPage>
      </FCLayout>
      <FCLayout style="height: auto" :flex="1" class="backgroundColor">
        <FCForm style="height: auto" v-bind="submitForm" :dataset="ds3">
        </FCForm>
      </FCLayout>
    </FCPage>
    <modalLink
      :currentRecord="currentRecord"
      :visible="visible"
      @close="visible = false"
    ></modalLink>
  </div>
</template>

<script>
import FCPage from '@/layouts/FCPage.vue'
import FCLayout from '@/layouts/FCLayout.vue'
import FCTab from '@/vendors/fc-ui/src/controls/FCTab.vue'
import FCForm from '@/vendors/fc-ui/src/form/FCForm.vue'
import FCTable from '@/vendors/fc-ui/src/table/FCTable.vue'
import FCButton from '@/vendors/fc-ui/src/controls/FCButton.vue'
import FCSelect from '@/vendors/fc-ui/src/controls/FCSelect.vue'
import FCInput from '@/vendors/fc-ui/src/controls/FCInput.vue'
import FCDatePicker from '@/vendors/fc-ui/src/controls/FCDatePicker.vue'
import FCInputNumber from '@/vendors/fc-ui/src/controls/FCInputNumber.vue'
import modalA from './modalA.vue'
import modalB from './modalB.vue'
import modalC from './modalC.vue'
import modalLink from './modalLink.vue'
import FCDataset from '@/vendors/fc-dataset/FCDataset'
import {
  getCounterPaymentData,
  getProactivePaymentData,
  submitData,
  getTransactorcode,
  getProvince,
  getCity,
  getArea,
} from '@/apis/centralizedPaymentApi'
import { isArray } from 'fc-cli-core'

export default {
  name: 'VueDemo',
  components: {
    FCTab,
    FCForm,
    FCButton,
    FCTable,
    FCSelect,
    FCInput,
    FCInputNumber,
    FCDatePicker,
    FCPage,
    FCLayout,
    modalLink,
  },

  data() {
    const ds1 = new FCDataset({
      fields: [
        { name: 'subcompany', type: 'string' },
        { name: 'currencycode', type: 'string' },
        { name: 'date', type: 'Array' },
        { name: 'settlementno', type: 'string' },
        { name: 'policyno', type: 'string' },
        { name: 'endorseno', type: 'string' },
        { name: 'summaryno', type: 'string' },
        { name: 'claimno', type: 'string' },
        { name: 'customername', type: 'string' },
        { name: 'payType', type: 'string' },
        { name: 'paytypedetail', type: 'string' },
        { name: 'startamount', type: 'string' },
        { name: 'endamount', type: 'string' },
        { name: 'classescodename', type: 'string' },
        { name: 'agentcode', type: 'string' },
        { name: 'transactorcode', type: 'string' },
        { name: 'checkStatus', type: 'string' },
        { name: 'department', type: 'string' },
        { name: 'ifpaytax', type: 'Boolean' },
        { name: 'orderbyply', type: 'Boolean' },
        { name: 'gdunitname', type: 'Boolean' },
        { name: 'businessattr', type: 'Boolean' },
        { name: 'province', type: 'String' },
        { name: 'city', type: 'String' },
        { name: 'area', type: 'String' },
        { name: 'address', type: 'String' },
      ],
      datas: [],
    })
    const ds11 = new FCDataset({
      fields: [
        { name: 'subcompany', type: 'string' },
        { name: 'currencycode', type: 'string' },
        { name: 'date', type: 'Array' },
        { name: 'settlementno', type: 'string' },
        { name: 'policyno', type: 'string' },
        { name: 'endorseno', type: 'string' },
        { name: 'summaryno', type: 'string' },
        { name: 'claimno', type: 'string' },
        { name: 'customername', type: 'string' },
        { name: 'payType', type: 'string' },
        { name: 'paytypedetail', type: 'string' },
        { name: 'startamount', type: 'string' },
        { name: 'endamount', type: 'string' },
        { name: 'classescodename', type: 'string' },
        { name: 'agentcode', type: 'string' },
        { name: 'transactorcode', type: 'string' },
        { name: 'checkStatus', type: 'string' },
        { name: 'department', type: 'string' },
        { name: 'ifpaytax', type: 'Boolean' },
        { name: 'orderbyply', type: 'Boolean' },
        { name: 'gdunitname', type: 'Boolean' },
        { name: 'businessattr', type: 'Boolean' },
      ],
      datas: [],
    })
    const ds2 = new FCDataset({
      fields: [
        { name: 'sequence', type: 'String' },
        { name: 'claimno', type: 'String' },
        { name: 'reportcaseno', type: 'String' },
        { name: 'policyno', type: 'String' },
        { name: 'endorseno', type: 'String' },
        { name: 'summaryno', type: 'String' },
        { name: 'datatype', type: 'String' },
        { name: 'customername', type: 'String' },
        { name: 'handledamount', type: 'String' },
        { name: 'taxesamount', type: 'String' },
        { name: 'redtaxesamount', type: 'String' },
        { name: 'redinvoicetaxesamount', type: 'String' },
        { name: 'accountamount', type: 'String' },
        { name: 'amount', type: 'String' },
        { name: 'baseleftamount', type: 'String' },
        { name: 'currencycode', type: 'String' },
        { name: 'basecurrencycode', type: 'String' },
        { name: 'settlementno', type: 'String' },
        { name: 'returnno', type: 'String' },
        { name: 'businessattr', type: 'String' },
        { name: 'banks', type: 'String' },
        { name: 'bankname', type: 'String' },
        { name: 'description', type: 'String' },
        { name: 'subcompany', type: 'String' },
        { name: 'agentcode', type: 'String' },
        { name: 'opdate', type: 'String' },
        { name: 'classescode', type: 'String' },
        { name: 'custaccountno', type: 'String' },
        { name: 'customercode', type: 'String' },
        { name: 'fatherno', type: 'String' },
        { name: 'departmentcode', type: 'String' },
        { name: 'usedamount', type: 'String' },
        { name: 'handledbaseamount', type: 'String' },
        { name: 'baseusedamount', type: 'String' },
        { name: 'baseamount', type: 'String' },
        { name: 'payableno', type: 'String' },
        { name: 'payableseq', type: 'String' },
        { name: 'risktype', type: 'String' },
        { name: 'unitcode', type: 'String' },
        { name: 'serialno', type: 'String' },
        { name: 'custseq', type: 'String' },
        { name: 'paymentmethod', type: 'String' },
        { name: 'ifpublic', type: 'String' },
        { name: 'checkcode', type: 'String' },
        { name: 'checkstatus', type: 'String' },
        { name: 'checkdate', type: 'String' },
        { name: 'checkcontent', type: 'String' },
        { name: 'endorsementrequestno', type: 'String' },
        { name: 'exstatus', type: 'String' },
        { name: 'exceptioncause', type: 'String' },
        { name: 'remark', type: 'String' },
        { name: 'gdunitcode', type: 'String' },
        { name: 'gdunitname', type: 'String' },
      ],
      datas: [],
    })
    const ds22 = new FCDataset({
      fields: [
        { name: 'claimno', type: 'String' },
        { name: 'reportcaseno', type: 'String' },
        { name: 'policyno', type: 'String' },
        { name: 'endorseno', type: 'String' },
        { name: 'summaryno', type: 'String' },
        { name: 'datatype', type: 'String' },
        { name: 'customername', type: 'String' },
        { name: 'handledamount', type: 'String' },
        { name: 'taxesamount', type: 'String' },
        { name: 'redtaxesamount', type: 'String' },
        { name: 'redinvoicetaxesamount', type: 'String' },
        { name: 'accountamount', type: 'String' },
        { name: 'amount', type: 'String' },
        { name: 'baseleftamount', type: 'String' },
        { name: 'currencycode', type: 'String' },
      ],
      datas: [],
    })

    const ds3 = new FCDataset({
      fields: [
        { name: 'customername', type: 'string' },
        { name: 'custaccountno', type: 'string' },
        { name: 'custbankno', type: 'string' },
        { name: 'bankname', type: 'string' },
        { name: 'payeeprovince', type: 'string' },
        { name: 'payeecity', type: 'string' },
        { name: 'checkdate', type: 'string' },
        { name: 'checkno', type: 'string' },
      ],
      datas: [],
    })

    return {
      activeKey: '1',
      ds1,
      ds11,
      ds2,
      ds22,
      ds3,
      queryForm: {
        cols: 4, //每行布局几列
        labelCol: 8,
        wrapperCol: 16,
        labelAlign: 'right', //对齐方式
        fields: [
          {
            name: 'subcompany',
            title: '分公司',
            controlType: 'select',
            rules: [{ required: true }],
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: '3010100', label: '上海分公司' },
                  { value: '2010100', label: '江苏分公司' },
                  { value: '1010100', label: '浙江分公司' },
                ]
              },
            },
          },
          {
            name: 'currencycode',
            title: '记账币种',
            controlType: 'selectTable',
            rules: [{ required: true }],
            controlProps: {
              tableProps: {
                fields: [
                  {
                    name: 'code',
                    title: '币种代码',
                  },
                  {
                    name: 'name',
                    title: '币种名称',
                  },
                ],
              },
              optionsLabel: 'name',
              optionsValue: 'code',
              optionsApi: async () => {
                return [
                  { code: '01', name: '人民币' },
                  { code: '02', name: '美元' },
                  { code: '03', name: '港元' },
                ]
              },
            },
          },
          {
            name: 'date',
            title: '挂账日期',
            rules: [{ required: true }],
            controlType: 'dateRangePicker',
            controlProps: {
              format: 'YYYY-MM-DD',
            },
          },
          {
            name: 'settlementno',
            title: '币种结算协议单号',
            controlType: 'input',
            labelCol: 12,
            wrapperCol: 12,
          },
          {
            name: 'policyno',
            title: '保单号',
            controlType: 'input',
          },
          {
            name: 'endorseno',
            title: '批单号',
            controlType: 'input',
          },
          {
            name: 'summaryno',
            title: '清单号',
            controlType: 'input',
          },
          {
            name: 'claimno',
            title: '赔案号',
            controlType: 'input',
          },
          {
            name: 'customername',
            title: '客户名称',
            controlType: 'input',
          },
          {
            name: 'payType',
            title: '业务类型',
            controlType: 'select',
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: '00', label: '全部' },
                  { value: '01', label: '赔款' },
                  { value: '02', label: '佣金' },
                  { value: '03', label: '比重结算协议单-批单' },
                ]
              },
            },
          },
          {
            name: 'paytypedetail',
            title: '分类',
            controlType: 'select',
            controlProps: {
              optionsOn: ['payType'],
              optionsApi: async ({ payType }) => {
                if (payType === '01') {
                  return [
                    { value: '1', label: '有账号' + payType },
                    { value: '2', label: '无账号' + payType },
                  ]
                } else if (payType === '02') {
                  return [
                    { value: '3', label: '有账号' + payType },
                    { value: '4', label: '无账号' + payType },
                  ]
                } else {
                  return [
                    { value: '5', label: '有账号' + payType },
                    { value: '6', label: '无账号' + payType },
                  ]
                }
              },
            },
          },
          {
            name: 'startamount',
            title: '记账金额',
            controlType: 'inputNumber',
          },
          {
            name: 'endamount',
            title: '至',
            controlType: 'inputNumber',
          },
          {
            name: 'classescodename',
            title: '险种',
            controlType: 'selectModal',
            controlProps: {
              modal: modalA,
              optionsLabel: 'classescodename',
              optionsValue: 'classescode',
              modalProps: {
                title: '选择险种',
                width: 800,
              },
            },
          },
          {
            name: 'agentcode',
            title: '代理点',
            controlType: 'selectModal',
            controlProps: {
              modal: modalB,
              optionsLabel: 'classescodename1',
              optionsValue: 'classescode',
              modalProps: {
                title: '中介机构',
                width: 800,
              },
            },
          },
          {
            name: 'transactorcode',
            title: '提取人',
            controlType: 'selectTable',
            controlProps: {
              tableProps: {
                fields: [
                  {
                    name: 'code',
                    title: '操作员工号',
                  },
                  {
                    name: 'name',
                    title: '操作员姓名',
                  },
                ],
              },

              optionsLabel: 'name',
              optionsValue: 'code',
              optionsApi: getTransactorcode,
            },
          },
          {
            name: 'checkStatus',
            title: '审核状态',
            controlType: 'select',
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: 0, label: '未审核' },
                  { value: 1, label: '审核通过' },
                  { value: 2, label: '审核失败' },
                ]
              },
            },
          },
          {
            name: 'departmentname',
            title: '部门名称',
            controlType: 'selectModal',
            controlProps: {
              modal: modalC,
              optionsLabel: 'departmentname',
              optionsValue: 'departmentcode',
              modalProps: {
                title: '选择部门',
                width: 800,
              },
            },
          },
          {
            name: 'ifpaytax',
            title: '专票退保不退税',
            labelCol: 9,
            wrapperCol: 15,
            controlType: 'checkbox',
          },
          {
            name: 'orderbyply',
            title: '保单排序',
            controlType: 'checkbox',
          },
          {
            name: 'gdunitname',
            title: '跟单机构名称',
            controlType: 'input',
          },
          {
            name: 'businessattr',
            title: '保单业务性质',
            controlType: 'select',
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: '01', label: '保费' },
                  { value: '02', label: '储金' },
                ]
              },
            },
          },
          // {
          //   name: 'test1',
          //   title: 'custom测试1',
          //   span: 24,
          //   labelCol: 2,
          //   wrapperCol: 22,
          //   customRender: () => {
          //     return (
          //       <a-space>
          //         <FCSelect
          //           value={this.province}
          //           placeholder={'省'}
          //           fcstyle={{ width: '200px' }}
          //           optionsApi={getProvince}
          //           onchange={async (newValue) => {
          //             this.province = newValue
          //             this.city = null
          //             this.area = null
          //             this.areaOptions = []
          //             if (this.province) {
          //               this.cityLoading = true
          //               this.cityOptions = await getCity(this.province)
          //               this.cityLoading = false
          //             } else {
          //               this.cityOptions = []
          //             }
          //             this.ds1.setFieldsValue({ province: this.province })
          //           }}
          //         ></FCSelect>
          //         <FCSelect
          //           value={this.city}
          //           placeholder={'市'}
          //           fcstyle={{ width: '200px' }}
          //           options={this.cityOptions}
          //           loading={this.cityLoading}
          //           onchange={async (newValue) => {
          //             this.city = newValue
          //             this.area = null
          //             if (this.city) {
          //               this.areaLoading = true
          //               this.areaOptions = await getArea(this.city)
          //               this.areaLoading = false
          //             } else {
          //               this.areaOptions = []
          //             }
          //             this.ds1.setFieldsValue({ city: this.city })
          //           }}
          //           // optionsApi={() => {
          //           //   return getCity(this.province)
          //           // }}
          //         ></FCSelect>
          //         <FCSelect
          //           value={this.area}
          //           placeholder={'区'}
          //           fcstyle={{ width: '200px' }}
          //           options={this.areaOptions}
          //           loading={this.areaLoading}
          //           onchange={(newValue) => {
          //             this.area = newValue
          //             this.ds1.setFieldsValue({ area: this.area })
          //           }}
          //         ></FCSelect>
          //         <FCInput
          //           value={this.address}
          //           placeholder={'地址'}
          //           onChange={(newValue) => {
          //             this.address = newValue
          //             this.ds1.setFieldsValue({ address: this.address })
          //           }}
          //         ></FCInput>
          //       </a-space>
          //     )
          //   },
          // },
          // {
          //   name: 'test2',
          //   title: 'custom测试2',
          //   span: 24,
          //   labelCol: 2,
          //   wrapperCol: 22,
          //   customRender: () => {
          //     return (
          //       <a-space>
          //         <FCInputNumber></FCInputNumber>
          //         <FCSelect
          //           fcstyle={{ width: '80px' }}
          //           optionsApi={() => {
          //             return [
          //               {
          //                 label: '$',
          //                 value: '01',
          //               },
          //               {
          //                 label: '￥',
          //                 value: '02',
          //               },
          //             ]
          //           }}
          //         ></FCSelect>
          //       </a-space>
          //     )
          //   },
          // },
          // {
          //   name: 'test3',
          //   title: 'custom测试3',
          //   span: 24,
          //   labelCol: 2,
          //   wrapperCol: 22,
          //   customRender: () => {
          //     return (
          //       <a-space>
          //         <FCInput
          //           value={this.testValue}
          //           onChange={(newValue) => {
          //             this.testValue = newValue
          //           }}
          //         ></FCInput>
          //         <FCButton
          //           type={'primary'}
          //           onClick={() => {
          //             this.testValue = '测试'
          //           }}
          //         >
          //           测试
          //         </FCButton>
          //       </a-space>
          //     )
          //   },
          // },
          // {
          //   name: 'test4',
          //   title: 'custom测试4',
          //   span: 24,
          //   labelCol: 2,
          //   wrapperCol: 5,
          //   customRender: () => {
          //     return (
          //       <FCDatePicker
          //         value={this.datePicker}
          //         onchange={(newValue) => {
          //           this.datePicker = newValue
          //         }}
          //       ></FCDatePicker>
          //     )
          //   },
          // },
        ],
      },
      data: {},
      loadingTable: false,
      loadingTable1: false,
      loadingSubmit: false,
      collapseForm: false,
      collapseForm1: false,
      queryFields: [
        {
          title: '赔案号',
          name: 'claimno',
          width: 200,
          ellipsis: true,
          customRender: (text, record) => {
            return <a onclick={this.openModal(record)}>{{ text }}</a>
          },
        },
        {
          title: '报案号',
          name: 'reportcaseno',
          width: 200,
          ellipsis: true,
        },
        {
          title: '保单号',
          name: 'policyno',
          width: 300,
          ellipsis: true,
        },
        {
          title: '批单号',
          name: 'endorseno',
          width: 300,
          ellipsis: true,
          customRender: (text, record) => {
            return <a onclick={this.openModal(record)}>{{ text }}</a>
          },
        },
        {
          title: '清单号',
          name: 'summaryno',
          width: 300,
          ellipsis: true,
        },
        {
          title: '数据类型',
          name: 'datatype',
          width: 300,
          ellipsis: true,
        },
        {
          title: '客户名称',
          name: 'customername',
          width: 300,
          ellipsis: true,
        },
        {
          title: '本次支付(记账币种)',
          name: 'handledamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '增值税金额',
          name: 'taxesamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '专票税金',
          name: 'redtaxesamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '已开红票税金',
          name: 'redinvoicetaxesamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '专票记账税金',
          name: 'accountamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '金额（记账币种）',
          name: 'amount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '保批单欠收金额',
          name: 'baseleftamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '记账币种',
          name: 'currencycode',
          width: 300,
          ellipsis: true,
        },
        {
          title: '保单币种',
          name: 'basecurrencycode',
          width: 300,
          ellipsis: true,
        },
        {
          title: '币种结算协议单号',
          name: 'settlementno',
          width: 300,
          ellipsis: true,
        },
        {
          title: '返还序号',
          name: 'returnno',
          width: 300,
          ellipsis: true,
        },
        {
          title: '保单业务性质',
          name: 'businessattr',
          width: 300,
          ellipsis: true,
        },
        {
          title: '银行名称',
          name: 'banks',
          width: 300,
          ellipsis: true,
        },
        {
          title: '开户行',
          name: 'bankname',
          width: 300,
          ellipsis: true,
        },
        {
          title: '摘要',
          name: 'description',
          width: 300,
          ellipsis: true,
        },
        {
          title: '分公司代码',
          name: 'subcompany',
          width: 300,
          ellipsis: true,
        },
        {
          title: '代理点',
          name: 'agentcode',
          width: 300,
          ellipsis: true,
        },
        {
          title: '挂账日期',
          name: 'opdate',
          width: 300,
          ellipsis: true,
        },
        {
          title: '业务险种',
          name: 'classescode',
          width: 300,
          ellipsis: true,
        },
        {
          title: '客户账户',
          name: 'custaccountno',
          width: 300,
          ellipsis: true,
        },
        {
          title: '客户代码',
          name: 'customercode',
          width: 300,
          ellipsis: true,
        },
        {
          title: '来源流水号',
          name: 'fatherno',
          width: 300,
          ellipsis: true,
        },
        {
          title: '部门代号',
          name: 'departmentcode',
          width: 300,
          ellipsis: true,
        },
        {
          title: '已处理金额（记账币种）',
          name: 'usedamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '本次支付(保单币种)',
          name: 'handledbaseamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '已处理金额（保单币种）',
          name: 'baseusedamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '金额(保单币种)',
          name: 'baseamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '待付款流水号',
          name: 'payableno',
          width: 300,
          ellipsis: true,
        },
        {
          title: '待付款批次号',
          name: 'payableseq',
          width: 300,
          ellipsis: true,
        },
        {
          title: '风险类别',
          name: 'risktype',
          width: 300,
          ellipsis: true,
        },
        {
          title: '财务机构代码',
          name: 'unitcode',
          width: 300,
          ellipsis: true,
        },
        {
          title: '序号',
          name: 'serialno',
          width: 300,
          ellipsis: true,
        },
        {
          title: '客户序号',
          name: 'custseq',
          width: 300,
          ellipsis: true,
        },
        {
          title: '支付方式',
          name: 'paymentmethod',
          width: 300,
          ellipsis: true,
        },
        {
          title: '支付性质',
          name: 'ifpublic',
          width: 300,
          ellipsis: true,
        },
        {
          title: '审核人员',
          name: 'checkcode',
          width: 300,
          ellipsis: true,
        },
        {
          title: '审核状态',
          name: 'checkstatus',
          width: 300,
          ellipsis: true,
        },
        {
          title: '审核日期',
          name: 'checkdate',
          width: 300,
          ellipsis: true,
        },
        {
          title: '审核意见',
          name: 'checkcontent',
          width: 300,
          ellipsis: true,
        },
        {
          title: '批单申请号',
          name: 'endorsementrequestno',
          width: 300,
          ellipsis: true,
        },
        {
          title: '支付类型',
          name: 'exstatus',
          width: 300,
          ellipsis: true,
        },
        {
          title: '例外支付原因',
          name: 'exceptioncause',
          width: 300,
          ellipsis: true,
        },
        {
          title: '备注',
          name: 'remark',
          width: 300,
          ellipsis: true,
        },
        {
          title: '共保跟单机构代码',
          name: 'gdunitcode',
          width: 300,
          ellipsis: true,
        },
        {
          title: '共保跟单机构名称',
          name: 'gdunitname',
          width: 300,
          ellipsis: true,
        },
      ],
      selectRows: [],
      selectRows1: [],
      selectedRowKeys: [],
      selectedRowKeys1: [],
      value: '1',
      options: [
        {
          label: '分别支付',
          value: '1',
        },
        {
          label: '合并支付',
          value: '2',
        },
      ],
      submitFields: [
        {
          title: '账户名称',
          name: 'accountname',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '本次付款金额',
          name: 'handledamount',
          width: 120,
          ellipsis: true,
          controlType: 'inputNumber',
        },
        {
          title: '记账币种',
          name: 'currencycode',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '票据类型',
          name: 'checktype',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '单据号码',
          name: 'billno',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '支付方式',
          name: 'paymode',
          width: 120,
          ellipsis: true,
          controlType: 'select',
          controlProps: {
            fcstyle: { width: '88px' },
          },
        },
        {
          title: '客户名称',
          name: 'customername',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '付款原因',
          name: 'payreason',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
      ],
      submitData: [
        {
          accountname: 111,
          handledamount: 222,
          currencycode: 333,
          endorseno: 444,
          billno: 555,
          paymode: '666',
          branchCode: '1111',
          priceType: 'aaaa',
        },
        {
          accountname: 111,
          handledamount: 222,
          currencycode: 333,
          endorseno: 444,
          billno: 555,
          paymode: '666',
          branchCode: '2222',
          priceType: 'bbbb',
        },
      ],
      index: 0,
      submitRows: [],
      // submitRows: [],
      submitForm: {
        cols: 2, //每行布局几列
        labelCol: 8,
        wrapperCol: 16,
        labelAlign: 'right', //对齐方式
        fields: [
          {
            name: 'customername',
            title: '客户名称',
            controlType: 'input',
          },
          {
            name: 'custaccountno',
            title: '客户账号',
            controlType: 'input',
          },
          {
            name: 'custbankno',
            title: '客户银行代码',
            controlType: 'input',
          },
          {
            name: 'bankname',
            title: '开户行',
            controlType: 'input',
          },
          {
            name: 'payeeprovince',
            title: '开户行省',
            controlType: 'input',
          },
          {
            name: 'payeecity',
            title: '开户行市',
            controlType: 'input',
          },
          {
            name: 'inpaymentbatchno',
            title: '票据用途',
            controlType: 'input',
          },
          {
            name: 'checkdate',
            title: '票据日期',
            controlType: 'datePicker',
            controlProps: {
              style: {
                width: '100%',
              },
            },
          },
          {
            name: 'checkno',
            title: '票据号码',
            controlType: 'input',
          },
        ],
      },
      formData: {},
      visible: false,
      currentRecord: {},
      //省
      province: undefined,
      //市
      city: undefined,
      //区
      area: undefined,
      cityOptions: [],
      areaOptions: [],
      address: '',
      cityLoading: false,
      areaLoading: false,
      testValue: '',
      datePicker: null,
    }
  },
  computed: {
    payCount() {
      let count = 0
      count = this.selectRows.reduce(
        (accumulator, current) => accumulator + parseFloat(current.amount),
        0
      )
      return count.toFixed(2)
    },
    payCount1() {
      let count = 0
      count = this.selectRows1.reduce(
        (accumulator, current) => accumulator + parseFloat(current.amount),
        0
      )
      return count.toFixed(2)
    },
    total() {
      let count = 0
      count = this.submitRows.reduce((accumulator, current) => {
        return accumulator + parseFloat(current.handledamount) || 0
      }, 0)
      return count.toFixed(2)
    },
    formControls() {
      return [
        {
          title: '查询',
          buttonType: 'primary',
          loading: this.loadingTable,
          onClick: () => {
            this.query()
          },
        },
        {
          title: '重置',
          onClick: () => {
            this.reset()
          },
        },
        {
          title: this.collapseForm ? '展开' : '收起',
          buttonType: 'link',
          onClick: () => {
            this.collapseForm = !this.collapseForm
          },
        },
      ]
    },
    formControls1() {
      return [
        {
          title: '查询',
          buttonType: 'primary',
          loading: this.loadingTable1,
          onClick: () => {
            this.query1()
          },
        },
        {
          title: '重置',
          onClick: () => {
            this.reset1()
          },
        },
        {
          title: this.collapseForm1 ? '展开' : '收起',
          buttonType: 'link',
          onClick: () => {
            this.collapseForm1 = !this.collapseForm1
          },
        },
      ]
    },
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getCounterPaymentData()
    },
    async getCounterPaymentData() {
      console.log(this.datePicker, 'this.datePicker')
      console.log(this.ds1.getValues(), 'ds1getValues')
      console.log(this.ds1.getRecord(), 'ds1getRecord')
      if (this.loadingTable) return
      this.clear()
      this.ds2.clear()
      this.loadingTable = true
      const res = await getCounterPaymentData()
      this.loadingTable = false
      if (isArray(res?.data?.data)) {
        res.data.data.forEach((item) => {
          this.ds2.addRecord(item)
        })
      }
    },
    async getProactivePaymentData() {
      if (this.loadingTable1) return
      this.clear()
      this.ds22.clear()
      this.loadingTable1 = true
      const res = await getProactivePaymentData()
      this.loadingTable1 = false
      if (isArray(res?.data?.data)) {
        res.data.data.forEach((item) => {
          this.ds22.addRecord(item)
        })
      }
    },
    changeTab(activeKey) {
      if (this.ds3.getValues().length) {
        let text = ''
        if (this.activeKey === '1') {
          text = '请先处理主动支付的数据,再切换柜面领款!'
        } else if (this.activeKey === '2') {
          text = '请处理完柜面领款的数据，再切换主动支付!'
        }
        this.$message.warning(text)
      } else {
        this.activeKey = activeKey
        this.clear()
      }
    },
    //查询
    query() {
      this.getCounterPaymentData()
    },
    query1() {
      this.getProactivePaymentData()
    },
    //重置
    reset() {
      this.$refs.form.resetFields()
    },
    reset1() {
      this.$refs.form1.resetFields()
    },
    clear() {
      if (this.activeKey === '1') {
        this.selectRows = []
        this.selectedRowKeys = []
      } else if (this.activeKey === '2') {
        this.selectRows1 = []
        this.selectedRowKeys1 = []
      }
      this.submitRows = []
      this.ds3.clear()
    },
    //选择
    onSelectChange(selectedRowKeys, selectRows) {
      console.log(selectedRowKeys, 'selectRowskeys')
      this.selectedRowKeys = selectedRowKeys
      this.selectRows = selectRows
    },
    onSelectChange1(selectedRowKeys, selectRows) {
      this.selectedRowKeys1 = selectedRowKeys
      this.selectRows1 = selectRows
    },
    //确定
    confirm() {
      const { activeKey, value, selectRows, selectRows1, payCount } = this
      if (this.ds3.getValues().length) {
        this.$message.warning('请取消重新选择数据！')
      } else {
        if (value === '1') {
          if (activeKey === '1') {
            this.submitRows = selectRows
          } else if (activeKey === '2') {
            this.submitRows = selectRows1
          }
          this.submitRows.forEach((item) => {
            this.ds3.addRecord(item)
          })
        } else {
          let row = selectRows.length ? selectRows[0] : {}
          row.handledamount = payCount
          this.submitRows = JSON.parse(JSON.stringify([row]))
          this.submitRows.forEach((item) => {
            this.ds3.addRecord(item)
          })
        }
      }
    },
    //明细重置
    detailReset() {
      //todo
    },
    //取消
    cancel() {
      this.clear()
    },
    //提交
    submit() {
      if (this.ds3.getValues().length) {
        this.$confirm({
          title: '确认提交该数据？',
          onOk: async () => {
            this.loadingSubmit = true
            const result = await submitData()
            this.loadingSubmit = false
            if (result) {
              this.$message.success('提交成功！')
            } else {
              this.$message.error('提交失败！')
            }
          },
        })
      } else {
        this.$message.warning('请选择提交的数据！')
      }
    },
    openModal(record) {
      return () => {
        this.currentRecord = record
        this.visible = true
      }
    },
  },
}
</script>

<style scoped lang="less">
.totalInfo {
  width: auto;
  position: absolute;
  bottom: 40px;
}
</style>
